<template>
	<view style="padding: 20rpx;">
		<view class="box" style="background-color: antiquewhite; padding: 10rpx 20rpx;">
			<uni-icons type="sound" size="16" style="position: relative; top: 2rpx;" color="orange"></uni-icons>
			<text style="font-size: 24rpx; margin-left: 5rpx; color: orange;">温馨提示：请适量点餐，避免浪费</text>
		</view>


		<view class="box" style="margin: 20rpx 0;" v-if="!xmorders.phone">
			<navigator url="/pages/address/address" hover-class="navigator-hover">
				<uni-icons type="plus" size="18" style="position: relative; top: 4rpx;" color="dodgerblue"></uni-icons>
				<text style="margin-left: 5rpx; color: dodgerblue;">请添加收货地址</text>
			</navigator>
		</view>




		<navigator url="/pages/address/address" hover-class="navigator-hover" class="box"
			style="padding: 10rpx; margin-top: 10rpx;" v-if="xmorders.phone">
			<view style="margin-bottom: 10rpx;">{{ xmorders.address }}</view>
			<view style="color: #888; margin-bottom: 10rpx;">
				<text>{{xmorders.userName }}</text>
				<text style="margin-left: 20rpx;">{{ xmorders.phone }}</text>
			</view>
		</navigator>

		<!-- 购物车商品和金额信息 -->
		<scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 50vh;">
			<view class="box" style="margin: 20rpx 0;">

				<view>
					<view style="display: flex; grid-gap: 20rpx; margin-bottom: 20rpx;" v-for="item in cartList"
						:key="item.id">
						<view style="width: 140rpx; height: 140rpx;" @click="test">
							<image :src="item.goods.images"
								style="width: 100%; height: 100%; display: block; border-radius: 10rpx;"></image>
						</view>
						<view style="flex: 1; display: flex; flex-direction: column; justify-content: space-between;">
							<view>{{ item.goods.name }}</view>
							<view style="color: #888;">x {{ item.num }}</view>
						</view>
						<view style="width: 150rpx; text-align: right; color: red; padding-top: 10rpx;">
							￥{{ item.goods.actual }}
						</view>
					</view>
				</view>



				<!-- 显示优惠和总金额信息 -->
				<view v-if="amountTotal">
					<view style="text-align: right;">
						<text>原价</text>
						<text style="color: red;">￥{{ amountTotal }}</text>
					</view>
					<view style="text-align: right;">
						<text>已优惠</text>
						<text style="color: red;">￥{{ discountTotal }}</text>
						<text style="margin-left: 20rpx;">小计</text>
						<text style="color: red; font-size: 36rpx; font-weight: bold;">￥{{ totalMoney }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 购物车商品和金额信息 -->



		<!-- 商家承诺 -->
		<view class="box" style="margin: 20rpx 0;">
			<view style="display: flex; margin-bottom: 10rpx;">
				<view style="flex: 1; font-weight: bold;">商家承诺</view>
				<view style="flex: 1; text-align: right; color: #666;">售后无忧 · 食无忧</view>
			</view>
			<view style="display: flex; margin-bottom: 10rpx;">
				<view style="flex: 1; font-weight: bold;">隐私保护</view>
				<view style="flex: 1; text-align: right; color: #666;">号码保护 · 隐私无忧</view>
			</view>

			<view style="display: flex; margin-bottom: 10rpx;">
				<view style="flex: 1; font-weight: bold;">备注</view>
				<navigator url="/pages/orderNote/orderNote" style="flex: 1; text-align: right; color: #999;">填写口味偏好
					<uni-icons type="right" color="#999" style="position: relative; top: 2rpx;"></uni-icons>
				</navigator>
			</view>
		</view>
		<!-- 商家承诺 -->



		<!-- 支付宝微信 -->
		<view class="box" style="margin-bottom: 1rpx;">
			<uni-data-checkbox v-model="orders.payType" :localdata="range"></uni-data-checkbox>
		</view>

		<!-- 提交按钮 -->
		<view v-if="amountTotal" class="box" style="position: fixed; bottom: 0; width: 100%; left: -40rpx;">
			<view style="text-align: right;">
				<text>已优惠</text>
				<text style="color: red;">￥{{ discountTotal }}</text>
				<text style="margin-left: 20rpx;">小计</text>
				<text style="color: red; font-size: 36rpx; font-weight: bold;">￥{{ totalMoney }}</text>
				<button size="mini" type="primary" style="margin-left: 20rpx; 
											background-color: dodgerblue; border-color: dodgerblue; position: relative; top: 6rpx;"
					@click="test">提交订单</button>
			</view>
		</view>
		<!-- 提交按钮 -->





	</view>
</template>

<script>
	import '@/static/css/global.css'
	export default {
		data() {
			return {
				cartList: [],
				user: uni.getStorageSync('xm-user'),
				xmorders: uni.getStorageSync('xm-orders'),
				c: [],
				business: {},
				totalMoney: '',
				discountTotal: '',
				amountTotal: '',
				orders: {
					payType: '支付宝'
				},
				range: [{
						"value": '支付宝',
						"text": "支付宝"
					},
					{
						"value": '微信支付',
						"text": "微信支付"
					},
				],
			}
		},
		onLoad(option) {
			this.business.id = option.businessId
			this.loadCart()
		},
		onShow() {
			// xmorders: uni.getStorageSync('xm-orders'),
			this.xmorders = uni.getStorageSync('xm-orders')
		},
		methods: {
			loadCart() {
				this.$request.get('/cart/showCartByUserId/' + this.user.id + '/' + this.business.id).then(res => {
					this.cartList = res.data.cartList || []
					this.totalMoney = res.data.total
					this.discountTotal = res.data.discountTotal
					this.amountTotal = res.data.amountTotal
				})
			},
			test() {
				this.xmorders = uni.getStorageSync('xm-orders'),
					this.xmorders.payType = this.orders.payType,
					this.xmorders.businessId = this.business.id,
					uni.setStorageSync('xm-orders', this.xmorders)


				//下订单
				this.$request.post('/orders/add/', {
					orders: this.xmorders,
					cartList: this.cartList
				}).then(res => {
					if (res.code == 200) {
						

						//清空购物车
						this.$request.get('/cart/clearCart/' + this.user.id + '/' + this.business.id).then(res => {
							if (res.code == 200) {
								uni.showToast({
									icon:"success",
									title:"下单成功"
								})
								 setTimeout(() => {
								                uni.switchTab({
								                    url: '/pages/index/index?clearCart=1'
								                });
								            }, 2000);
								
							
							}
						})
						
					}
				})
				
				
			}




		},

	}
</script>

<style>

</style>